<template>
  <div class="box">
    <!-- 顶部 -->
    <van-nav-bar title="评估处理"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="../../assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>

    <div class="content">
      <div class="item">
        <van-row>
          <van-col span="24"
                   class="subject">
            <div class="title">
              <span class="i"></span>
              <span>待补处方患者</span>
            </div>
            <van-field v-model="params.cycle"
                       label=" 当前化疗周期："
                       type="number" />
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <div class="title">
          <span class="i"></span>
          <span>风险因素</span>
        </div>
        <van-row>
          <van-col span="17"
                   class="subject">
            1.对恶心呕吐、食欲不佳的预期？<br />
            <span style="font-weight:400;font-size:12px">(对即将接受的治疗，因既往呕吐经历、外界 环境信息等心理因素，导致未用治疗时就出 现恶心呕吐、食欲不佳的反应或心理预测)</span>
          </van-col>
          <van-col span="7">
            <van-radio-group v-model="params.vomit"
                             direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="17"
                   class="subject">
            2.接受铂类或蒽环类化疗？
          </van-col>
          <van-col span="7">
            <van-radio-group v-model="params.chemotherapy"
                             direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="17"
                   class="subject">
            3.同时使用其他致吐药物<br />
            <span style="font-weight:400;font-size:12px">(如阿片类止痛药、5-羟色胺再摄取抑制剂。 羟考酮、吗啡、曲马多、氟西汀、舍曲林、 艾司西酞普兰等)</span>
          </van-col>
          <van-col span="7">
            <van-radio-group v-model="params.other_vomit"
                             direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </div>
      <div class="item">
        <van-row>
          <van-col span="17"
                   class="subject"
                   style="line-height:20px">
            4.在之前抗肿瘤治疗周期中发生过 恶心呕吐
            <span style="font-weight:400;font-size:12px">(含食欲不佳)</span>
          </van-col>
          <van-col span="7">
            <van-radio-group v-model="params.poor"
                             direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </van-col>
        </van-row>
      </div>
      <div class="item"
           style="border:none">
        <div class="title">
          <span class="i"></span>
          <span>抗肿瘤治疗药物名单</span>
        </div>
        <div class="medicine">
          <span class="m_left">静脉注射抗肿瘤药物</span>
          <span class="m_left">
            <!-- 搜索 -->
            <van-search v-model="search"
                        @focus="fieldSelect"
                        @click="$router.push('/yihu/serachJingmai?intravenous='+ JSON.stringify(intravenousList))"
                        shape="round"
                        background="#FFFFFF"
                        placeholder="搜索" />
          </span>
        </div>
        <div class="multiple">
          <span v-if="intravenousList.length === 0">暂未添加</span>
          <span v-for="(i,ins) in intravenousList"
                :key="ins">
            {{i.drug_name}}
            <img class="img"
                 @click="delDrug(ins)"
                 src="@/assets/img/x.png"
                 alt="">
          </span>
        </div>
        <div class="medicine">
          <span class="m_left">口服抗肿瘤药物</span>
          <span class="m_left">
            <van-search v-model="search1"
                        @focus="fieldSelect"
                        @click="$router.push('/yihu/searchKoufu?antitumor='+ JSON.stringify(antitumorList))"
                        shape="round"
                        background="#FFFFFF"
                        placeholder="搜索" />
          </span>
        </div>
        <div class="multiple ">
          <span v-if="antitumorList.length === 0">暂未添加</span>
          <span v-for="(i,ins) in antitumorList"
                :key="ins">
            {{i.drug_name}}
            <img class="img"
                 @click="delDrug2(ins)"
                 src="@/assets/img/x.png"
                 alt="">
          </span>
        </div>
      </div>
    </div>
    <button class="btn"
            @click="cinvAssess">开始CINV综合评估</button>
  </div>
</template>
<script>
import { cinvAssess } from '@/api/medical'
import eventBus from '@/utils/eventBus'
export default {
  data () {
    return {
      radio: 1,
      value: 1,
      search: '',
      search1: '',
      params: {
        id: '',
        cycle: '1', // 当前化疗周期
        vomit: '', // 恶心呕吐食欲不振的预期
        chemotherapy: '', // 铂类化疗
        other_vomit: '', // 其他致吐
        poor: '', // 食欲不佳
        intravenous: '', // 静脉注射抗肿瘤药物 传id，使用英文逗号分割 e.g:1,2,3 这样的数据
        antitumor: ''
      },
      intravenousList: [], // 静脉药物渲染list
      antitumorList: [] // 口服药物渲染list
    }
  },
  mounted () {
    console.log('mounted')
    // 这里缓存了 不准确 哪里用直接 $route.query.id 现拿
    // this.params.id = this.$route.query.id
    this.bind()
  },
  methods: {
    fieldSelect  () {
      document.activeElement.blur()
    },
    // 删除单项
    delDrug (ins) {
      this.intravenousList.splice(ins, 1)
    },
    delDrug2 (ins) {
      this.antitumorList.splice(ins, 1)
    },
    // 绑定事件总线
    bind () {
      eventBus.$on('intravenous', function (data) {
        this.intravenousList = data.intravenousList
      }.bind(this))
      eventBus.$on('antitumor', function (data) {
        this.antitumorList = data.antitumorList
      }.bind(this))
    },
    // 提交患者评估
    async cinvAssess () {
      const params = { ...this.params }
      const wL = ['id', 'cycle', 'intravenous', 'antitumor']
      for (const key in params) {
        if (wL.includes(key)) continue
        if (params[key] === '2') params[key] = '-1'
      }
      params.id = this.$route.query.id
      params.antitumor = this.antitumorList.map(it => it.id).join(',')
      params.intravenous = this.intravenousList.map(it => it.id).join(',')
      const { code, msg, data } = await cinvAssess(params)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('提交成功')
      setTimeout(() => {
        this.$router.replace({
          path: '/yihu/yihumation',
          query: {
            id: data.id,
            risk: data.risk,
            recommend: data.recommend,
            dranitsaris: data.dranitsaris,
            cinv_prescription: data.cinv_prescription
          }
        })
      }, 1000)
    }
  }
}
</script>
<style scoped lang='less'>
// 标题
.title {
  width: 100%;
  height: 30px;
  .i {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    opacity: 1;
  }
  span {
    display: inline-block;
    height: 22px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #4182ff;
    opacity: 1;
  }
}
//  顶部导航
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
/deep/.van-cell {
  width: 85%;
}
/deep/.van-field__label {
  width: 40%;
}
/deep/.van-field__value {
  width: 40%;
}
/deep/.van-field__control {
  background: #f7f8fa;
  border: 1px solid #eeeeee;
  padding-left: 8px;
  box-sizing: border-box;
  color: #a0a0a0;
}
// search
/deep/ .van-search {
  width: 200px;
}
/deep/ .van-cell {
  align-items: center;
}
/deep/ .van-field__control {
  border: 0;
  &::placeholder {
    color: #3f78f9 !important;
  }
}
/deep/.van-search__content {
  height: 28px;
  border: 1px solid #3f78f9;
}
/deep/.van-icon-search {
  color: #3f78f9;
}
// search: end
.box {
  width: 100%;
  overflow: hidden;
  .content {
    margin-top: 42px;
    width: 100%;
    background-color: #fff;
    padding-left: 16px;
    box-sizing: border-box;
    .item {
      width: 100%;
      border-bottom: 2px solid #f5f5f5;
      .subject {
        padding: 10px 10px 10px 0;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #161616;
      }
      /deep/.van-radio__label {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 20px;
        color: #161616;
        opacity: 0.5;
      }
      /deep/.van-icon {
        font-size: 14px;
        vertical-align: bottom;
      }
      /deep/.van-radio-group {
        margin-top: 20px;
      }
      .medicine {
        width: 100%;
        height: 40px;
        // background-color: red;
        line-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          display: inline-block;
          // width: 50%;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #161616;
        }
      }
      .multiple {
        width: 96%;
        // height: 60px;
        padding-bottom: 10px;
        background: #ffffff;
        border: 1px solid rgba(112, 112, 112, 0.23137254901960783);
        border-radius: 8px;
        margin: 10px 0;
        span {
          display: inline-block;
          padding: 3px 8px;
          box-sizing: border-box;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #161616;
          .img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .btn {
    width: 80%;
    height: 48px;
    margin: 30px 10%;
    border: none;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
    border-radius: 37px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 48px;
    color: #ffffff;
  }
}
</style>
